<template>
    <div>
        <h1 v-if="isShow">你好</h1>
        <h1 v-show="isShow">hello world</h1>
        <button @click="fun">切换显示隐藏</button>
    </div>
</template>
<script>
export default {
    // 判断指令
    // 1. v-if：功能是切换DOM的显示和隐藏，直接操作了DOM元素
    // 2. v-show：功能是切换DOM的显示和隐藏，操作的是元素的样式，display属性
    data(){
        return {
            isShow:true
        }
    },
    methods:{
        fun(){
            // 如果是真，我就需要变成非真
            this.isShow = !this.isShow
        }
    }
}
</script>
<style scoped>

</style>